<template>
    <div>
        <el-menu class="el-menu-vertical-demo">
            <el-sub-menu :index="(index+1).toString()" v-for="(item,index) in navlist" :key="index">
                <template #title>
                    <el-icon v-if="index==0"><SwitchButton /></el-icon>
                    <el-icon v-else-if="index==1"><Football /></el-icon>
                    <el-icon v-else-if="index==2"><Baseball /></el-icon>
                    <el-icon v-else-if="index==3"><Notebook /></el-icon>
                    <span>{{item.catagory}}</span>
                </template>
                    <el-menu-item :index="(index+1) + '-' + (i+1).toString()" v-for="(list,i) in item.list" :key="i" @click="clickHandle(list.cid)">
                        {{list.name}}
                    </el-menu-item>
            </el-sub-menu>
      </el-menu>
    </div>
</template>

<script>
import axios from 'axios';
import { SwitchButton,Football,Baseball,Notebook } from '@element-plus/icons-vue'
export default {
    mounted(){
        axios.get('navlist.json').then( res=>{
            this.navlist = res.data.navlist
        })
    },
    methods:{
        clickHandle(cid){
            this.$emit('head',cid)
        }
    },
    data() {
        return {
            navlist:[]
        }
    },
    components:{
        SwitchButton,
        Football,
        Baseball,
        Notebook
    }
}
</script>